import { useState } from 'react';
import { DemoBlock } from 'demos';
import { Button, Popup, Space, Form, TextArea } from '@pxxtech/mobile';

const FormDemo = () => {
  return (
    <Form>
      <Form.Item>
        <TextArea />
      </Form.Item>
      <Popup.Footer>
        <Button color="primary">提交</Button>
      </Popup.Footer>
    </Form>
  );
};

export default () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <DemoBlock title="不同位置弹出">
        <Space>
          <Button
            onClick={() => {
              Popup.show({
                title: '底部弹出',
                position: 'bottom',
                content: 'Hello',
                actions: [
                  [
                    {
                      key: 'cancel',
                      text: '取消',
                    },
                    {
                      key: 'confirm',
                      text: '确定',
                      color: 'primary',
                    },
                  ],
                ],
              });
            }}
          >
            底部弹出
          </Button>
          <Button
            onClick={() => {
              Popup.show({
                title: '居中弹出',
                content: 'Hello',
                actions: [
                  [
                    {
                      key: 'cancel',
                      text: '取消',
                    },
                    {
                      key: 'confirm',
                      text: '确定',
                      color: 'primary',
                    },
                  ],
                ],
              });
            }}
          >
            居中弹出
          </Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="confirm弹出">
        <Button
          onClick={async () => {
            const handler = await Popup.confirm({
              title: 'confirm弹出',
              content: 'Hello',
            });
            if (handler) {
              console.log('确定');
            } else {
              console.log('取消');
            }
          }}
        >
          confirm弹出
        </Button>
      </DemoBlock>
      <DemoBlock title="带有icon弹出">
        <Button
          onClick={() => {
            Popup.show({
              autoCenter: true,
              title: '提交成功',
              icon: 'success',
              content:
                '您的投诉已提交，平台运营人员会尽快帮您处理！请前咨询列表査看反馈结果！',
              actions: [
                [
                  {
                    key: 'confirm',
                    text: '知道了',
                    color: 'primary',
                  },
                ],
              ],
            });
          }}
        >
          带有icon弹出
        </Button>
      </DemoBlock>
      <DemoBlock title="state控制弹出">
        <Popup
          content="Hello"
          title="state控制弹出"
          visible={visible}
          position="bottom"
          onClose={() => setVisible(false)}
          actions={[
            [
              {
                key: 'cancel',
                text: '取消',
              },
              {
                key: 'confirm',
                text: '确定',
                color: 'primary',
              },
            ],
          ]}
        />
        <Button onClick={() => setVisible(true)}>state控制弹出</Button>
      </DemoBlock>
      <DemoBlock title="form示例">
        <Button
          onClick={() => {
            Popup.show({
              title: '标题',
              position: 'bottom',
              content: <FormDemo />,
            });
          }}
        >
          form示例
        </Button>
      </DemoBlock>
    </>
  );
};
